<template>
  <div class="app-container overall">
    <el-row>
      <el-col :span="24">
        <el-space direction="vertical" class="vertical">
          <el-card shadow="never">
            <el-radio-group v-model="radio">
              <el-radio label="1">
                <h2>利用综合风险区划设置中的死亡人数和直接经济损失/区域内上年度 GDP中设置值进行组合</h2>
              </el-radio>
            </el-radio-group>
            <div class="radio-content">
              <div v-loading="loading.form1">
                <h3>死亡人数四个临界值设置（单位：人）：</h3>
                <p>
                  {{ form1.v1 }}、{{ form1.v2 }}、{{ form1.v3 }}、{{ form1.v4 }}四个临界值划分成五个区间；
                  新疆、青海和西藏地区{{ form1.xqxV1 }}、{{ form1.xqxV2 }}、{{ form1.xqxV3 }}、{{ form1.xqxV4 }}四个临界值划分成五个区间
                </p>
                <el-row>
                  <el-col style="display: flex;align-items: end;">
                    <el-form :model="form1" :disabled="radio == '2'" ref="form1Ref">
                      <el-space>
                        <div class="color-div" style="background-color: #FFCC99;"></div>
                        <el-input v-model="form1.v1" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FFCC33;"></div>
                        <el-input v-model="form1.v2" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FFCC66;"></div>
                        <el-input v-model="form1.v3" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FF9900;"></div>
                        <el-input v-model="form1.v4" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FF0000;"></div>
                      </el-space>
                      <ArrowRight />
                      <p>新疆、青海和西藏地区</p>
                      <el-space>
                        <div class="color-div" style="background-color: #FFCC99;"></div>
                        <el-input v-model="form1.xqxV1" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FFCC33;"></div>
                        <el-input v-model="form1.xqxV2" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FFCC66;"></div>
                        <el-input v-model="form1.xqxV3" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FF9900;"></div>
                        <el-input v-model="form1.xqxV4" class="color-input" v-inputNumber="0"></el-input>
                        <div class="color-div" style="background-color: #FF0000;"></div>
                      </el-space>
                      <ArrowRight />
                    </el-form>
                    <el-button plain :disabled="radio == '2'" @click="save('1')" style="margin-left: 50px">保存</el-button>
                  </el-col>
                </el-row>
              </div>
              <div v-loading="loading.form2">
                <h3>直接经济损失/区域内上年度 GDP四个临界值设置：</h3>
                <p>
                  {{ form2.v1 }}、{{ form2.v2 }}、{{ form2.v3 }}、{{ form2.v4 }}四个临界值划分成五个区间；
                  新疆、青海和西藏地区{{ form2.xqxV1 }}、{{ form2.xqxV2 }}、{{ form2.xqxV3 }}、{{ form2.xqxV4 }}四个临界值划分成五个区间
                </p>
                <el-row>
                  <el-col style="display: flex;align-items: end;">
                    <el-form :model="form2" :disabled="radio == '2'" :rules="rules2" ref="form2Ref">
                      <el-space>
                        <div class="color-div" style="background-color: #FFCC99;"></div>
                        <el-form-item prop="v1">
                          <el-input v-model="form2.v1" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FFCC33;"></div>
                        <el-form-item prop="v2">
                          <el-input v-model="form2.v2" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FFCC66;"></div>
                        <el-form-item prop="v3">
                          <el-input v-model="form2.v3" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FF9900;"></div>
                        <el-form-item prop="v4">
                          <el-input v-model="form2.v4" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FF0000;"></div>
                      </el-space>
                      <ArrowRight />
                      <p>新疆、青海和西藏地区</p>
                      <el-space>
                        <div class="color-div" style="background-color: #FFCC99;"></div>
                        <el-form-item prop="xqxV1">
                          <el-input v-model="form2.xqxV1" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FFCC33;"></div>
                        <el-form-item prop="xqxV2">
                          <el-input v-model="form2.xqxV2" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FFCC66;"></div>
                        <el-form-item prop="xqxV3">
                          <el-input v-model="form2.xqxV3" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FF9900;"></div>
                        <el-form-item prop="xqxV4">
                          <el-input v-model="form2.xqxV4" class="color-input" v-padEnd="2"><template
                              #append>%</template></el-input>
                        </el-form-item>
                        <div class="color-div" style="background-color: #FF0000;"></div>
                      </el-space>
                      <ArrowRight />
                    </el-form>
                    <el-button plain :disabled="radio == '2'" @click="save('2')" style="margin-left: 50px">保存</el-button>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <h3 style="text-align: center"><b>表2</b> 区域地震灾害风险等级分级指标</h3>
                    <el-table :data="table1">
                      <el-table-column label="风险等级" prop="level" align="center" width="150px"></el-table-column>
                      <el-table-column label="分级指标（以区/县行政区为估算单位）" prop="index" align="center">
                        <template #default="{ row }">
                          <div v-html="row.index"></div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                  <el-col :span="12">
                    <h3 style="text-align: center"><b>表3</b> 新疆、青海和西藏地区地震灾害风险等级分级指标</h3>
                    <el-table :data="table2">
                      <el-table-column label="风险等级" prop="level" align="center" width="150px"></el-table-column>
                      <el-table-column label="分级指标（以区/县行政区为估算单位）" prop="index" align="center">
                        <template #default="{ row }">
                          <div v-html="row.index"></div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <el-row>
                  <p>注：表2分级指标不适用于新疆、青海和西藏地区</p>
                </el-row>
              </div>
            </div>
          </el-card>
          <el-card shadow="never">
            <el-radio-group v-model="radio">
              <el-radio label="2">
                <h2>人员死亡和经济损失，设定权重，形成五个区间，根据区间划分五个风险等级</h2>
              </el-radio>
            </el-radio-group>
            <div class="radio-content" v-loading="loading.form3">
              <el-row style="margin-top: 15px">
                <el-col :span="3">设定权重值</el-col>
                <el-form :model="form3" :disabled="radio == '1'" ref="form3Ref" :rules="rules3">
                  <el-space direction="vertical" :size="20">
                    <el-space>
                      <span>死亡人数：</span>
                      <el-form-item prop="deathNum">
                        <el-input v-model="form3.deathNum" class="color-input" v-inputNumber="0">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-space>
                    <el-space>
                      <span>经济损失：</span>
                      <el-form-item prop="economicLoss">
                        <el-input v-model="form3.economicLoss" class="color-input" v-inputNumber="0">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-space>
                  </el-space>
                </el-form>
              </el-row>
              <p>设置临界值区间</p>
              <el-row>
                <el-col style="display: flex;align-items: end;">
                  <el-form :model="form3" :disabled="radio == '1'" ref="form3Ref" :rules="rules3">
                    <el-space>
                      <div class="color-div" style="background-color: #FFCC99;"></div>
                      <el-input v-model="form3.v1" class="color-input" v-inputNumber="0"></el-input>
                      <div class="color-div" style="background-color: #FFCC33;"></div>
                      <el-input v-model="form3.v2" class="color-input" v-inputNumber="0"></el-input>
                      <div class="color-div" style="background-color: #FFCC66;"></div>
                      <el-input v-model="form3.v3" class="color-input" v-inputNumber="0"></el-input>
                      <div class="color-div" style="background-color: #FF9900;"></div>
                      <el-input v-model="form3.v4" class="color-input" v-inputNumber="0"></el-input>
                      <div class="color-div" style="background-color: #FF0000;"></div>
                    </el-space>
                    <ArrowRight />
                  </el-form>
                  <el-button plain :disabled="radio == '1'" style="margin-left: 50px" @click="save('3')">保存</el-button>
                </el-col>
              </el-row>
              <!-- <el-row justify="end"><el-button :disabled="radio == '1'">保存</el-button></el-row> -->
            </div>
          </el-card>
        </el-space>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="overall-index">
import ArrowRight from '@/views/buildingRiskZoning/standardSetting/components/arrowRight'
import { comprehensiveSave, getComprehensive } from '@/api/buildingRiskZoning/standardSetting/index'
import { rangeValidate } from '@/utils/validate'

const { proxy } = getCurrentInstance()

const radio = ref('1')
const form1 = ref({})
const form2 = ref({})
const form3 = ref({})
const loading = ref({
  form1: false,
  form2: false,
  form3: false
})
const rules2 = {
  v1: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v2: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v3: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v4: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV1: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV2: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV3: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV4: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }]
}
const rules3 = {
  deathNum: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  economicLoss: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }]
}

const table1 = computed(() => {
  return [
    { level: 'Ⅰ级', index: `死亡人数≥${form1.value.v4}<br>或（直接经济损失/区域内上年度GDP）≥${form2.value.v4}%` },
    { level: 'Ⅱ级', index: `${form1.value.v4}>死亡人数≥${form1.value.v3}<br>或${form2.value.v4}%>（直接经济损失/区域内上年度GDP）≥${form2.value.v3}%` },
    { level: 'Ⅲ级', index: `${form1.value.v3}>死亡人数≥${form1.value.v2}<br>或${form2.value.v3}%>（直接经济损失/区域内上年度GDP）≥${form2.value.v2}%` },
    { level: 'Ⅳ级', index: `${form1.value.v2}>死亡人数≥${form1.value.v1}<br>或${form2.value.v2}%>（直接经济损失/区域内上年度GDP）≥${form2.value.v1}%` },
    { level: 'Ⅴ级', index: `死亡人数<${form1.value.v1}<br>或（直接经济损失/区域内上年度GDP）<${form2.value.v1}%` },
  ]
})
const table2 = computed(() => {
  return [
    { level: 'Ⅰ级', index: `死亡人数≥${form1.value.xqxV4}<br>或（直接经济损失/区域内上年度GDP）≥${form2.value.xqxV4}%` },
    { level: 'Ⅱ级', index: `${form1.value.xqxV4}>死亡人数≥${form1.value.xqxV3}<br>或${form2.value.xqxV4}%>（直接经济损失/区域内上年度GDP）≥${form2.value.xqxV3}%` },
    { level: 'Ⅲ级', index: `${form1.value.xqxV3}>死亡人数≥${form1.value.xqxV2}<br>或${form2.value.xqxV3}%>（直接经济损失/区域内上年度GDP）≥${form2.value.xqxV2}%` },
    { level: 'Ⅳ级', index: `${form1.value.xqxV2}>死亡人数≥${form1.value.xqxV1}<br>或${form2.value.xqxV2}%>（直接经济损失/区域内上年度GDP）≥${form2.value.xqxV1}%` },
    { level: 'Ⅴ级', index: `死亡人数<${form1.value.xqxV1}<br>或（直接经济损失/区域内上年度GDP）<${form2.value.xqxV1}%` },
  ]
})

const save = async (type) => {
  let data = {}
  if (type == '1') {
    data = { ...form1.value, type }
  } else if (type == '2') {
    data = { ...form2.value, type }
  } else {
    data = { ...form3.value, type }
  }

  proxy.$refs[`form${type}Ref`].validate((valid) => {
    if (valid) {
      comprehensiveSave(data).then(res => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess('保存成功！')
          type == '1' && getData('1')
          type == '2' && getData('2')
          type == '3' && getData('3')
        }
      })
    }
  })
}

const getData = (type) => {
  loading.value[`form${type}`] = true
  getComprehensive({ type }).then(res => {
    if (res.code == 200) {
      if (type == '1') {
        form1.value = res.data
      } else if (type == '2') {
        form2.value = res.data
      } else {
        form3.value = res.data
      }
    }
    loading.value[`form${type}`] = false
  }).catch(() => loading.value[`form${type}`] = false)
}
onMounted(() => {
  getData('1')
  getData('2')
  getData('3')
})
</script>
<style scoped lang="scss">
.app-container {
  min-width: 1000px;

  h2 {
    font-weight: bold;
  }

  .radio-content {
    margin: 0 25px;
  }

  :deep(.el-table) {
    .el-table__header-wrapper th {
      background-color: transparent !important;
    }

    td.el-table__cell {
      border-bottom: var(--el-table-border) !important;
    }
  }
}

:deep(.vertical.el-space) {
  width: 100%;

  &>.el-space__item {
    width: 100%;
  }
}

.overall .el-form-item {
  margin: 0;
}
</style>